<template>
  <div class="inspection-index">
    <div class="demo-nav">
      <div class="demo-nav__title">质检服务</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
      <van-icon class="demo-nav__right" name="friends" size="20" color="#000000"/>
    </div>
    <div class="inspection-index-head-img">
      <img width="300" height="400" src="@/assets/xiu4.jpg">
<!--      <van-image fit="cover" src="@/assets/xiu3.jpg/>-->
    </div>
    <div class="inspection-index-from">
      <div class="inspection-index-from-content">
        <div class="inspection-index-from-content-top">
          <van-row>
            <van-col span="8">
              <div style="padding: 0.5rem; border-right: #ebedf0 solid 0.1rem" align="left">
                <p>好评率</p>
                <p style="color: orange;font-size: 1rem">{{this.haopinglv}}%</p>
              </div>
            </van-col>
            <van-col span="8">
              <div style="padding: 0.5rem;" align="left">
                <p>服务人数</p>
                <p style="font-size: 1rem">{{this.fuwurenshu}}</p>
              </div>
            </van-col>
            <van-col span="8">
              <div style="padding: 0.5rem;" align="left">
                <p>排查隐患项</p>
                <p style="font-size: 1rem">{{this.paichayinhuan}}</p>
              </div>
            </van-col>
          </van-row>

          <van-row>
            <van-col>
              <!--<div class="bottom-btn" @click="payOrder">立即购买</div>-->
            </van-col>
          </van-row>

        </div>
        <div class="inspection-index-from-content-bottom">
          <!-- 输入手机号，调起手机号键盘 -->
          <van-form ref="formzero" :model="formzero"  >
            <van-field v-model="formzero.zeroPhone" :rules="[{ required: true, message: '请填写手机号' }]" placeholder="请输入11位手机号" type="tel" style="background-color: #F7F7F7;border: 0.1rem solid #ebedf0;border-radius: 0.5rem" disabled/>
            <van-field v-model="formzero.zeroAdder" :rules="[{ required: true, message: '请填写地址' }]" placeholder="请输入详细地址" style="background-color: #F7F7F7;border: 0.1rem solid #ebedf0;border-radius: 0.5rem;margin: 0.5rem 0" />
            <van-checkbox v-model="checked" style="font-size: 0.8rem" icon-size="0.8rem">我已阅读并同意《服务须知》</van-checkbox>
            <van-button @click="showPopup" round type="primary" style="width: 16rem;margin-top: 0.6rem">"零元"申请质检服务</van-button>
            <!--style="width: 10rem;height: 1.5rem"-->
          </van-form>


          <van-popup v-model="show" style="width: 18rem;height: 14rem">

            <van-form ref="form" :model="form" >
              <van-field
                v-model="form.ownerName"
                name="用户名"
                label="用户名"
                placeholder="用户名"
              />

              <!--<van-field>-->

              <!--</van-field>-->

              <van-field name="rate" label="评分">
                <template #input>
                  <van-rate v-model="form.ownerXing" />
                </template>
              </van-field>

              <van-field
                v-model="form.ownerParticulars"
                name="详情"
                rows="2"
                autosize
                label="详情"
                type="textarea"
                maxlength="50"
                placeholder="详情"
              />

              <div style="margin: 16px;">
                <van-button round block type="info" @click="submitForm">提交</van-button>
              </div>
            </van-form>

          </van-popup>

          <van-popup @click="assa" v-model="showOne" style="border-radius: 30px;width: 10rem;height: 2.5rem;background-color: aquamarine">
            <p>一键拨号询问<a :href="'tel:' + phone" rel="external nofollow" >{{phone}}</a></p>
            <meta name="format-detection" content="telephone=yes" />
          </van-popup>
        </div>
      </div>
    </div>
    <div class="kongbai"></div>
    <div class="inspection-index-content">
      <div class="inspection-index-content-evaluate">
        <div class="inspection-index-content-evaluate-top" align="left">
          <p>业主评价 <span style="font-weight: normal;font-size: 0.7rem">  业主真实评价</span></p>
        </div>
        <div class="inspection-index-content-evaluate-bottom" align="left" style="padding-top: 0.5rem">
          <van-swipe @change="onChange">

          <div v-for="item in indexList">
            <van-swipe-item>
              <div class="inspection-index-content-evaluate-cont">
                <van-image round width="2.5rem" height="2.5rem" :src="item.customerHandImage" style="float: left"/>
                <div style="padding-left: 3rem">
                  <p>{{item.ownerName}}</p>
                  <p>{{item.ownerDate}}</p>
                  <p><van-rate v-model="item.ownerXing" readonly size="0.8rem" /></p>
                </div>
                <div style="font-size: 0.8rem;padding-top: 0.3rem">
                  <p style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
                    {{item.ownerParticulars}}
                </p></div>
              </div>
            </van-swipe-item>
          </div>
            <template #indicator>
              <div class="custom-indicator"></div>
            </template>
          </van-swipe>
        </div>
      </div>

      <div align="left" v-html="this.xiangqing"></div>

    </div>


  </div>
</template>

<script>
  import { zeroadd,zeroList,zeroedit,loginName} from "@/api/customer/zeroyuan";
  import { findAllList,getinfo,add,unifiedOrder } from "@/api/customer/evaluation";
  import axios from "axios";
  import {Toast} from "vant";
  import wx from 'weixin-js-sdk';
  import { getSignature } from "@/api/commodity/alipay";
import { zhijianlist } from "@/api/zhijian";


  export default {
      name: "inspection_index",
    components:{
      // Editor
    },
      data() {
        return{
          paichayinhuan:'',
          fuwurenshu:'',
          haopinglv:'',
          xiangqing:Object,
          showFasong: false,
          buttons: [{
            title: '我的好友',
            extra: {
              scene: 'WXSceneSession'
            }
          },
            {
              title: '朋友圈',
              extra: {
                scene: 'WXSceneTimeline'
              }
            },
          ],
          buttons1: [{
            title: 'QQ',
            extra: {
              scene: 'WXSceneSession'
            }
          },
          ],
          buttons2: [
            {
              title: '微博',
              extra: {
                scene: 'WXSceneTimeline'
              }
            },
          ],
          sweixin: null,
          shares: null,
          sqq: null,
          sinaweibo: null,

          orderNo:"zhangsan",
          amount: 22.2,
          body:'张胜男',

          appid: 'wx05c8af6ffe91bc2b',
          local:'sss',
          teamStatusNUm:'2',
          ceshi: '1',
          phone: '18333151858',
          indexList:[],
          form:{},
          formfa:{},
          formzero:{},
          showOne: false,
          show: false,
          indexzero:[],
          tel: '15533911111',
          text: '石家庄',
          checked: false,
          current: 0,
          value:5,

      tupian: 'http://img-cdn-qiniu.dcloud.net.cn/icon3.png',
          //必须配置项，从接口获取
          appId:"",
          timestamp:"",
          noncstr:"",
          signatureInfo:"",
          // 自配项
          imgurl:"",//分享图片（如分享出来链接上显示的小图标）
          url:"",//分享地址（如分享出来一个链接，点链接要跳的页面地址）
          zhilist:[],
        }
      },
      created() {
        this.getList();
        this.getzeroList();
        this.showPopupAdd();
        this.getLoginName();
this.getzhijianlist();
        //指的是要做分享的页面的url送过去，请求成功才能拿到
        let url = location.href.split('#')[0];
        this.$axios({
          url:'/use/shareurl',//请求微信分享的接口地址
          method:'post',
          data:url,
        }).then(res=>{
          if(res.data.success){
          //这些配置参数必填项，后面去调微信的pai是需要传的。
          this.appId = res.data.appId;
          this.timestamp = res.data.timestamp;
          this.noncstr = res.data.noncstr;
          this.signatureInfo = res.data.signatureInfo;
        }
      }).catch(err=>{console.log(err)})
      },
      mounted() {
        if(window.plus) {
          this.updateSerivces();
        }
      },
      methods: {
        fasong(){
          // this.showFasong = true;
          this.$router.push({ path:'/FaStrategy'})
        },
      getzhijianlist(){
        zhijianlist().then(res=>{
          this.zhilist = res.data.rows;
         // alert(JSON.stringify(this.zhilist.fuwurenshu))
          for (let i = 0; i < this.zhilist.length; i++) {

            this.fuwurenshu = this.zhilist[0].fuwurenshu
            this.haopinglv = this.zhilist[0].haopinglv
            this.paichayinhuan = this.zhilist[0].paichayinhuan
            this.xiangqing = this.zhilist[0].xiangqing
          }
        })
      },

        // 调用拨号功能
        callPhone (phone) {
          window.location.href = 'tel://' + phone
          this.show = true;
          this.showOne = false;


        },
        getzeroList(){
          zeroList().then(res=>{
            this.indexzero = res.data;
          })
        },

        getList(){
          findAllList().then(res=>{
            this.indexList = res.data;
          })
        },

        submitForm(){
              add(this.form).then(res=>{
                Toast.success('评价成功');
                this.show = false;
                this.getList();
            })
        },

        assa(){
          this.showOne = false;
          this.show = true;
        },

        showPopupAdd(){
          zeroadd(this.formzero).then(res=>{
            this.getList();
            this.getzeroList();
            // Toast.success('您申请零元质检服务成功,会在24小时内联系您。😀');
        })
        },

        showPopup(){
          console.log("***"+this.formzero.zeroAdder)
        if (this.formzero.zeroAdder == undefined){
          Toast("请填写地址");
        }else{


          if (this.checked == false){
            Toast('请勾选,服务须知');
          }else{
            if(this.indexzero[0].teamStatus == '1'){
              Toast.success('您已申请成功,请保持电话畅通。😀');
            }else if(this.indexzero[0].teamStatus == '0') {
              this.show = true;
            }else if (this.indexzero[0].teamStatus == '2') {
              zeroedit(this.formzero).then(res=>{
                Toast.success('您申请零元质检服务成功,会在24小时内联系您。😀');
                this.getList();
                this.getzeroList();
              })
            }
          }


        }

        },

        onChange(index) {
          this.current = index;
        },

        toBack(){
          this.$router.go(-1);//返回上一层
        },

        //获取用户手机号
        getLoginName() {
          loginName().then(res=>{
            this.formzero.zeroPhone=res.data.msg;
          })
        }
      }

    }
</script>

<style scoped>

  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .demo-nav__right{
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .inspection-index-from{
    padding: 1rem;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 5%;
  }
  .inspection-index-from .inspection-index-from-content{
    border-radius: 0.5rem;
    -moz-box-shadow:0px 1px 8px #333333;
    -webkit-box-shadow:0px 1px 8px #333333;
    box-shadow:0px 1px 8px #333333;
    background-color: #fff;
  }

  .inspection-index-from-content-top{
    padding-top: 0.6rem;
  }
  .inspection-index-from-content-top p{
    font-size: 0.7rem;
    padding: 0.2rem;
  }
  .inspection-index-from-content-bottom{
    padding: 1rem;
  }
  .inspection-index-content{
    padding: 0 1rem;
  }
  .inspection-index-content p{
    font-size: 1rem;
    font-weight: bolder;
  }
  .inspection-index-content-evaluate-cont{
    padding: 1rem;
    border: #ebedf0 0.1rem solid;
    border-radius: 1rem;
  }
  .inspection-index-content-evaluate-cont p{
    font-size: 0.85rem;
    font-weight: normal;
  }
  .inspection-index-content-evaluate-conts{
    padding: 1rem;
    border: #ebedf0 0.1rem solid;
    border-radius: 1rem;
    display: inline-block;
    width: 88%;
  }
  .inspection-index-content-evaluate-conts p{
    font-size: 0.85rem;
    font-weight: normal;
  }
  .kongbai{
    height: 18rem;
  }
</style>
